#{extends 'front.html' /}
#{set title:product.name/}
#{set current:'products'/}

#{set 'moreScripts'}
	<script type="text/javascript">
	
	$(function(){
		
		var setLinkStyle = function(e){
			$(".productLinks li").css("font-weight","normal");
			$(e).css("font-weight","bold");
		}
		
		$("#LinkOverview").click(function(){
			$("#overview").css("display","block");
			$("#specifications").css("display","none");
			setLinkStyle(this);
		});
		
		$("#LinkSpecifications").click(function(){
			$("#overview").css("display","none");
			$("#specifications").css("display","block");
			setLinkStyle(this);
		});
		
		$("#thumbs li").mouseover(function(){
			$(this).css("padding","2px").css("border","2px solid #red");
			var imgSrc = $(this).children("img").attr("src");
			$("#datailImage .bigImage").attr("src",imgSrc);
		}).mouseout(function(){
			$(this).css("padding","3px").css("border","1px solid #cccccc")
		});
	});
	
	
	</script>
#{/set}


<ul class="breadcrumb">
  <li><a href="#">Home</a> <span class="divider">/</span></li>
  <li><a href="#">Products</a></li>
  #{list items:parentTypes,as:'parentType'}
  <li><span class="divider">/</span> <a href="@{productList(parentType.id)}">${parentType.name}</a></li>
  #{/list}
  <li class="active"><span class="divider">/</span> ${product.name}</li>
</ul>
<div class="row">
	<div class="span7">
		<div class="textInfo">
			<h1>${product.name}</h1>
			${product.overview.raw()}
		</div>
	</div>
	<div class="span5">
		<div id="datailImage">
			%{
				if(product.images.size()>0){
			}%
				<img src="${play.configuration['attachments.download.prefix']+product.images.get(0)}" class="bigImage" width="400"/>
			%{
				}else if(product.detailImage!=null){
			}%
				<img src="${play.configuration['attachments.download.prefix']+product.detailImage}" class="bigImage" width="400"/>
			%{
				}else{
			}%
				<img src="" class="bigImage" width="400"/>
			%{
				}
			}%
			
			%{
			if(product.images.size()>1){
			}%
			<ul id="thumbs">
			#{list items:product.images,as:'image'}
				<li><img src="${play.configuration['attachments.download.prefix']+image}" height="50"/></li>
			#{/list}
			</ul>
			%{
			}
			}%
		</div>
		<div class="btn-group buyProduct">
		  <a class="btn dropdown-toggle btn-primary btn-large" data-toggle="dropdown" href="#">
		    <i class="icon-shopping-cart icon-white"></i>Buy sample or Retail
		    <span class="caret"></span>
		  </a>
		  <ul class="dropdown-menu">
		    <li><a href="%{if(product.dentalsellerUrl==null || product.dentalsellerUrl.equals('')){out.print('http://www.dentalseller.com/catalogsearch/result/?q='+product.name);}else{out.print(product.dentalsellerUrl);}}%" target="_blank">Goto Spark Dental Store</a></li>
		    <li><a href="%{if(product.ebayUrl==null || product.ebayUrl.equals('')){out.print('http://stores.ebay.com/Spark-Dental');}else{out.print(product.ebayUrl);}}%" target="_blank">Goto Spark Ebay Store</a></li>
		    <li><a href="%{if(product.amazonUrl==null || product.amazonUrl.equals('')){out.print('http://www.amazon.com/shops/Sparkdental');}else{out.print(product.amazonUrl);}}%" target="_blank">Goto Spark Amazon Store</a></li>
		  </ul>
		</div>
	</div>
</div>